import 'package:flutter/material.dart';
import 'package:macnov/stores/budget.dart';

class BudgetAdd extends StatefulWidget {
  @override
  _BudgetAddState createState() => _BudgetAddState();
}

class _BudgetAddState extends State<BudgetAdd> {
  _nameOnChange(value) {
    budgetStore.budgetAddForm.name = value;
  }

  _goalOnChange(value) {
    budgetStore.budgetAddForm.goal = value;
  }

  String budgetType = 'ONE_TIME';
  Widget buildName() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(10),
      child: Row(
        children: <Widget>[
          Container(
            width: 110,
            child: Text('BUDGET NAME:'),
          ),
          Container(
            width: MediaQuery.of(context).size.width - 110 - 20 - 10,
            padding: EdgeInsets.only(left: 10),
            child: TextField(
              onChanged: _nameOnChange,
              decoration: InputDecoration(
                  hintText: 'Enter budget name',
                  contentPadding: EdgeInsets.all(10.0),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(15.0),
                  )),
            ),
          )
        ],
      ),
    );
  }

  Widget buildGoal() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(10),
      child: Row(
        children: <Widget>[
          Container(
            width: 110,
            child: Text('AMOUNT:'),
          ),
          Container(
            width: MediaQuery.of(context).size.width - 110 - 20 - 10,
            padding: EdgeInsets.only(left: 10),
            child: TextField(
              onChanged: _goalOnChange,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              textInputAction: TextInputAction.done,
              decoration: InputDecoration(
                  hintText: 'Enter budget goal',
                  // prefix: Text(r'$'),
                  contentPadding: EdgeInsets.all(10.0),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(15.0),
                  )),
            ),
          )
        ],
      ),
    );
  }

  _goBudgetOwner(BuildContext context) {
    Navigator.pushNamed(context, '/owner/owner_select');
  }

  _goBudgetMember(BuildContext context) {
    Navigator.pushNamed(context, '/owner/member_select');
  }

  _changeType(String type) {
    setState(() {
      budgetType = type;
    });
    budgetStore.budgetAddForm.type = type;
  }

  Widget buildBudgetType(BuildContext context) {
    return Container(
      color: Colors.white,
      child: ListTile(
        onTap: () => showModalBottomSheet(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            context: context,
            builder: (BuildContext context1) {
              return Container(
                // height: 220,
                padding: EdgeInsets.fromLTRB(20, 20, 20, 40),
                child: Column(
                  children: <Widget>[
                    Text('BUDGET TYPE'),
                    ListTile(
                        onTap: () {
                          _changeType('ONE_TIME');
                          Navigator.pop(context);
                        },
                        title: Text('One time'),
                        subtitle: Text(
                            'Set a goal and work towards that goal. Goal dose not reset.'),
                        trailing: budgetType == 'ONE_TIME'
                            ? Image.asset(
                                'assets/budget/duigou.png',
                                width: 28,
                              )
                            : Icon(
                                Icons.arrow_downward,
                                color: Colors.white,
                              )),
                    ListTile(
                        onTap: () {
                          _changeType('RECURRING');
                          Navigator.pop(context);
                        },
                        title: Text('Recurring'),
                        subtitle: Text(
                            'Set and work towards a goal every month. Goal resets on the 1st.'),
                        trailing: budgetType == 'RECURRING'
                            ? Image.asset(
                                'assets/budget/duigou.png',
                                width: 28,
                              )
                            : Icon(
                                Icons.arrow_downward,
                                color: Colors.white,
                              ))
                  ],
                ),
              );
            }),
        title: Text('TYPE:'),
        trailing: Container(
          width: 120,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Text(budgetType),
              Icon(Icons.arrow_forward_ios),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildOwners(BuildContext context) {
    return Container(
      color: Colors.white,
      child: ListTile(
        onTap: () => _goBudgetOwner(context),
        title: Text('FUND MANAGER:'),
        trailing: Container(
          width: 90,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Text(
                budgetStore.showOwnerStr,
                maxLines: 1,
                overflow: TextOverflow.fade,
              ),
              Icon(Icons.arrow_forward_ios)
            ],
          ),
        ),
      ),
    );
  }

  Widget buildMembers(BuildContext context) {
    return Container(
      color: Colors.white,
      child: ListTile(
        onTap: () => _goBudgetMember(context),
        title: Text('MEMBERS:'),
        trailing: Container(
          width: 120,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Text(
                budgetStore.showMemberStr,
                maxLines: 1,
                overflow: TextOverflow.fade,
              ),
              Icon(Icons.arrow_forward_ios),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildSetting(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.only(top: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 10, bottom: 4),
            child: Text('SETTINGS',
                textAlign: TextAlign.left,
                style: TextStyle(
                  color: Colors.black,
                )),
          ),
          buildBudgetType(context)
        ],
      ),
    );
  }

  Widget buildPeople(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.only(top: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 10, bottom: 4),
            child: Text('PEOPLE',
                textAlign: TextAlign.left,
                style: TextStyle(
                  color: Colors.black,
                )),
          ),
          buildOwners(context),
          buildMembers(context)
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    budgetStore.loadCompanyUsers();
  }

  _loadBudget() {
    budgetStore.loadBudgets();
  }

  _save(BuildContext context) {
    var formData = budgetStore.budgetAddForm.toJson();
    budgetStore.createBudget(formData, () {
      _goBack(context);
      _loadBudget();
    });
  }

  _goBack(BuildContext context) {
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Scaffold(
          appBar: AppBar(
              backgroundColor: Colors.white,
              brightness: Brightness.light,
              iconTheme: IconThemeData(color: Colors.black),
              elevation: 0.5,
              centerTitle: true,
              title: Text(
                'NEW BUDGET',
                style: TextStyle(color: Colors.black),
              ),
              // leading: Padding(
              //   padding: EdgeInsets.only(left: 10),
              //   child: InkWell(
              //     child: Image.asset('assets/common/Cancel.png'),
              //     onTap: () => _goBack(context),
              //   ),
              // ),
              actions: <Widget>[
                FlatButton(
                  child: Text(
                    'SAVE',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  onPressed: () => _save(context),
                )
              ]),
          body: Container(
              color: Colors.white10,
              child: Column(
                children: <Widget>[
                  buildName(),
                  buildGoal(),
                  buildSetting(context),
                  buildPeople(context)
                ],
              ))),
    );
  }
}
